<template>
	<view>
		<uni-forms :value="info" ref="form" validateTrigger="bind" class="word5">
			<!-- <uni-forms-item required name="检查点图片">
				<view style="margin-left: 223rpx;margin-top: 20rpx;">
					<uploader v-model="info['检查点图片']" @input="binddata('检查点图片',$event)" />
				</view>
			</uni-forms-item> -->
			<uni-forms-item required label="检查点类型" name="检查点类型">
				<singlePicker :list='checkPointList' placeHolder="请选择检查点类型" v-model="info['检查点类型']" @input="binddata('检查点类型',$event),onchange($event)" />
			</uni-forms-item>
			<!-- 
			<view class="">
				检查点类型：
				<singlePicker :list='checkPointList' placeHolder="请选择检查点类型" />
			</view> -->
	   
	   
			<clinic ref="clinic" v-if="info['检查点类型'] == 'clinic'" />
			<company ref="company" v-if="info['检查点类型'] == 'company'" />
			<rentalHouse ref="rentalHouse" v-if="info['检查点类型'] == 'rentalHouse'" />
			<residential ref="residential" v-if="info['检查点类型'] == 'residential'" />
			<restaurant ref="restaurant" v-if="info['检查点类型'] == 'restaurant'" />
		</uni-forms>
		<view class="order-btn">
			<button>取消</button>
			<button @click="submitForm">保存</button>
		</view>
	</view>
</template>

<script>
	import singlePicker from '../../myComponents/single-picker.vue'
	import uploader from '@/myComponents/image-uploader.vue'
	import clinic from './basicInfo/clinic.vue'
	import company from './basicInfo/company.vue'
	import rentalHouse from './basicInfo/rentalHouse.vue'
	import residential from './basicInfo/residential.vue'
	import restaurant from './basicInfo/restaurant.vue'
	export default {
		components: {
			singlePicker,
			uploader,
			clinic,
			company,
			rentalHouse,
			residential,
			restaurant
		},
		data() {
			return {
				type:'',
				checkPointList: [],
				types: this.$type,
				info: {
					id: null,
				},
				//表单验证规则
				rules: {
					检查点图片: {
						rules: [{
							required: true,
							errorMessage: '检查点图片',
						}]
					},
					检查点类型: {
						rules: [{
							required: true,
							errorMessage: '检查点类型',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		created() {
			this.checkPointList = Object.keys(this.types['检查点类型']).map(x => {
				return {
					id: x,
					name: this.types['检查点类型'][x]
				}
			})
			console.log(this.checkPointList)
		},
		mounted() {
			if (this.info.id) {
				//如果是编辑获取信息
				this.getInfo()
			} else {
				// 新增
			}

		},
		methods: {
			onchange(type) {
				console.log(type)
				this.type = type
			},
			//获取详情
			getInfo(id) {
				console.log(id)
				this.info = {
					"检查点编号": '121212',
					"检查点类型": 'company',
					"所属网格id": 1,
					"创建时间": '2020-10-01 19:12:23',
					longitude: 23.312,
					lagitude: 120.1212,
					检查点信息: {
						企业名称: '中国人民银行',
						法定代表人: '王大拿',
						成立日期: '2012-11-12',
						经营期限: '20年',
						地址: '企业名地址',
						企业安全负责人: '王小二',
						负责人电话: '12121212',
						企业人数: '10-20人',
						统一社会信用代码: '123123123',
						经营状态: "xxx",
						核实日期: '2020-12-12',
						企业登记类型: "sss",
						登记机关: '2323登记机关23',
						工作区域面积: '22',
						消防重点关注对象: true,
						备注: "备注备注备注备注",
						照片上传: [{
							id: 'xxxx'
						}]
					}
				}

				//v-if需要让子组件加载后设置值
				this.$nextTick(() => {
					this.$refs[this.info["检查点类型"]].setFields(this.info["检查点信息"])
				})

			},
		
			async submitForm() {
				//同步执行，先提交子组件的表单
				let detialInof = await this.$refs[this.info["检查点类型"]].submitForm().catch(err => {
					console.log(err)
				})
				console.log('child',detialInof)

				//提交父组件表单
				this.$refs.form.submit().then(res => {
					console.log(res)
					//子组件没有错误
					if (detialInof) {
						//提交
						console.log('提交')
						if(this.info["检查点类型"] == 'company'){
							res["公司"] = detialInof
							// res.longitude = detialInof.位置.logitude
						}
						//tijiao houtai
						console.log('zhengget',res)
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			}
		}
	}
</script>

<style>

</style>
